onMount()

Posted on 2023-02-06 by

App.svelte

<script>
	import Example1 from "./Example1.svelte";
	import Example2 from "./Example2.svelte";

	let show = false;
</script>

<input bind:checked={show} type="checkbox" name="" id="" />

{#if show}
	<Example1 />
	<Example2 />
{/if}

In the first example we have an interval that increments a count variable every second.

Example1.svelte

<script>
	import { onMount } from "svelte";
	let count = 0;

	onMount(() => {
		let intervalId = setInterval(() => {
			console.log("count", ++count);
		}, 1000);
	});
</script>

{count}

In the second example we fetch and use onMount to prevent the fetch from running when server rendered (and instead wait until it is mounted).

Example2.svelte

<script>
	import { onMount } from "svelte";
	let src;

	onMount(() => {
		const controller = new AbortController();
		const signal = controller.signal;

		fetch("https://dog.ceo/api/breeds/image/random", { signal })
			.then((response) => response.json())
			.then(({ message }) => {
				src = message;
			});
	});
</script>

<img {src} alt="dog" style="width: 200px;" />

<style>
</style>

One problem we have is that when we uncheck the checkbox the interval is still running (you can see this in the console).

We need to remember to clean them up.

Here's one way to do it:

Example1v2.svelte

<script>
	import { onMount, onDestroy } from "svelte";
	let count = 0;
	let intervalId;

	onMount(() => {
		intervalId = setInterval(() => {
			console.log("count", ++count);
		}, 1000);
	});

	onDestroy(() => {
		clearInterval(intervalId);
	});
</script>

{count}

But since this is a very common pattern in Svelte there's another way to do it.

You can return a function in onMount and it will be called when the component is destroyed.

Example1v3.svelte

<script>
	import { onMount } from "svelte";
	let count = 0;

	onMount(() => {
		let intervalId = setInterval(() => {
			console.log("count", ++count);
		}, 1000);
		return () => clearInterval(intervalId);
	});
</script>

{count}

This way we don't need to import onDestroy and we can define the variable in onMount as well.

We can also use the return in onMount to cancel the fetch when quickly checking and unchecking .

Example2v3.svelte

<script>
	import { onMount } from "svelte";
	let src;

	onMount(() => {
		const controller = new AbortController();
		const signal = controller.signal;

		fetch("https://dog.ceo/api/breeds/image/random", { signal })
			.then((response) => response.json())
			.then(({ message }) => {
				src = message;
			});

		return () => controller.abort();
	});
</script>

<img {src} alt="dog" style="width: 200px;" />

<style>
</style>

(open the network tab to see this, you may need to set throttling to slow 3G because the images are tiny)

It's important to note that onMount does not render during SSR (server side rendering) .